<template>
  <div>
    <van-nav-bar title="重置密码" left-arrow @click-left="GOback" placeholder fixed :border="false" />
    <van-form @submit="onSubmit">
      <van-field v-model="username" name="账号" label="账号" placeholder="账号" :rules="[{ required: true, message: '请填写账号' }]" />
      <van-field v-model="password" type="password" name="旧密码" label="旧密码" placeholder="旧密码" :rules="[{ required: true, message: '请填写旧密码' }]" autocomplete="off" />
      <van-field v-model="newpassword" type="password" name="新密码" label="新密码" placeholder="请输入新密码" :rules="[{ required: true, message: '请输入新密码' }]" autocomplete="off" />
      <van-field v-model="confirmpassword" type="password" name="确认密码" label="确认密码" placeholder="请确认密码" :rules="[{ required: true, message: '请输入新密码' }]" autocomplete="off" />
      <van-field v-model="captcha_code" center label="验证码" placeholder="验证码" :rules="[{ required: true, message: '请输入验证码' }]" />
      <img @click="cation" :src="this.requ" alt="">
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">确认修改</van-button>
      </div>
    </van-form>
    <van-dialog v-model="show" confirmButtonColor="#3199e8" @confirm="back">
      <template #default>
        <div class="tip_icon">
          <span></span>
          <span></span>
        </div>
        <p class="tip_text">密码修改成功</p>
      </template>
    </van-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //用户名
      username: '',
      //密码
      password: '',
      //验证码
      captcha_code: '',
      //验证码base64地址
      requ: '',
      // 新密码
      newpassword: '',
      // 确认密码
      confirmpassword: '',
      show: false
    }
  },
  methods: {
    GOback() {
      this.$router.go(-1)
    },
    //验证码
    async cation() {
      // this.$store.dispatch('cationinfo')
      const { data: res } = await this.reques.post('v1/captchas')
      this.requ = res.code
    },

    // 提交数据修改密码
    async onSubmit() {
      const { data: res } = await this.reques.post('v2/changepassword', {
        username: this.username,
        oldpassWord: this.password,
        newpassword: this.newpassword,
        confirmpassword: this.confirmpassword,
        captcha_code: this.captcha_code
      })
      console.log(res)
      if (res.success === '密码修改成功') {
        // 符合条件启动弹框
        this.show = true
      }
    },
    back() {
      this.$router.replace('/user/info')
    }
  },
  mounted() {
    this.cation()
  }
}
</script>

<style lang="less" scoped>
img {
  top: 9.3rem;
  right: 1rem;
  position: absolute;
}
</style>